<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>总结</h1>
        <p>
            <!-- 
                收集表单数据:
                    若:<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
                    岩:<input type="radio”/>，则v-model收集的是value值，且要给标签配置value值.
                    行:<input type="checkbox"/>
                    1.没有配置input的value属性，那么收集的就是checked(勾选  or 未勾选，是布尔值)
                    2.配置input的value属性:
                        (1)v-model的初始值是非数组（如 表单后面的同意 条款），那么收集的就是checked ( 勾选 or 木勾选，是布尔值)
                        (2)v-model的初始值是数组（如 收集的是 多选的爱好），那么收集的的就是value组成的数组
                    
                    备注:
                    v-model的三个修饰符:lazy:失大焦点再收集数据number:输入字符串转为有效的数字trim:输入首尾空格过滤
             -->
        </p>



        <form  @submit.prevent="submit">
            <label for="username">账号</label>
            <input type="text"  id="username" v-model.trim="userInfo.username">
            <br><br>
            <label for="password">密码</label>
            <input type="password" id="password" v-model="userInfo.password">
            <br><br>
            年龄<input type="number" id="password" v-model.number="userInfo.age">
            <br><br>
            <label for="sex">性别</label>
            男<input type="radio" name="sex" value="男" v-model="userInfo.sex">
            女<input type="radio" name="sex" value="女" v-model="userInfo.sex">
            <br><br>
            <label for="hobby"></label>   
            抽烟<input type="checkbox" id="hobby" value="抽烟" v-model="userInfo.hobby">
            喝酒<input type="checkbox" id="hobby" value="喝酒" v-model="userInfo.hobby">
            烫头<input type="checkbox" id="hobby" value="烫头" v-model="userInfo.hobby">

            <br><br>
            <label for="city">所属校区</label>
            <select name="city" id="city" v-model="userInfo.city">
                <option value="">--请选择--</option>
                <option value="重庆">重庆</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
            </select>
            <br><br>
            <label for="message">留言</label>
            <textarea name="message" id="message" cols="30" rows="10" v-model="userInfo.message"></textarea>
            <br><br>
            <input type="checkbox"  v-model="userInfo.read"> 阅读 并接受<a>协议</a>
            <button>提交</button>
        </form>


    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            userInfo:{
                username:'',
                password:'',
                sex:'',
                age:'',
                hobby:[],
                city:'重庆',
                message:'',
                read:false
            }
        },
        methods: {
            submit(){
                console.log(JSON.stringify(this.userInfo));
            }
        },
    })
</script>
</html>